<template>
  <view class="container">
    <u-navbar
      id="nav-bar"
      :is-back="true"
      :showBackIcon="false"
      :background="{ background: 'transparent' }"
      :border-bottom="false"
      title="我的"
      :custom-back="customBack"
    >
      <image
        slot="backIcon"
        class="settingIcon"
        src="/static/images/my-setting.png"
        @click="navigateTo('/pages/setting/index')"
      />
    </u-navbar>

    <image class="bg" src="/static/images/bg.png" mode="widthFix"></image>

    <view class="header">
      <view class="header-main">
        <view class="header-mainIn">
          <view class="header-main_info" @click="authentication()">
            <view class="info-headImg">
              <u-avatar
                :src="user.headImg"
                mode="circle"
                :size="110"
                class="info-headImg_img"
              ></u-avatar>
            </view>
            <view class="info-main">
              <view class="info-main_f">
                <text>张三三</text>
              </view>
              <view class="info-main_s">18888888888</view>
            </view>
            <image
              class="info-btn"
              src="/static/images/my-qhsf.png"
              mode="widthFix"
            />
          </view>
        </view>
      </view>
    </view>

    <view class="balance">
      <image
        class="balance-bg"
        src="/static/images/my-levelBg.png"
        mode="widthFix"
      />
      <view class="balance-in">
        <view class="left">
          <image
            class="level-img"
            src="/static/images/my-level7.png"
            mode="widthFix"
          />
          <text>M7</text>
        </view>
        <view class="right" @click="navigateTo('/pages/my/myPolicy')">
          <text>我的等级变化记录</text>
          <u-icon name="arrow-right" color="rgba(255,255,255,0.5)"></u-icon
        ></view>
      </view>
    </view>

    <!-- 我的订单 -->
    <view class="section">
      <view class="title">
        <text class="title-name">我的订单</text>
        <image
          class="title-sign"
          src="/static/images/icon-tzgg.png"
          mode="widthFix"
        ></image>
        <view
          class="more u-flex"
          @click="navigateTo('/pages/my/order?from=my&tab=0')"
        >
          <text>查看全部</text>
          <u-icon name="arrow-right" color="#999999"></u-icon>
        </view>
      </view>
      <view class="row">
        <view
          class="flex-center navigation"
          v-for="item in navigateList"
          :key="item.id"
          @click="navigateClickTo(item)"
        >
          <image class="icon" :src="item.icon" mode="aspectFill"></image>
          <view class="name">{{ item.name }}</view>
        </view>
      </view>
    </view>

    <view class="showBox">
      <view class="item">
        <image
          class="item-img"
          src="/static/images/my-qbyy.png"
          mode="widthFix"
        />
        <view class="item-content">
          <view class="value">24568.11</view>
          <view class="label">钱包余额(元)</view>
          <button class="btn" @click="navigateTo('/pages/home/xingHuiExchange')">立即兑换</button>
        </view>
      </view>

      <view class="item ml16">
        <image
          class="item-img"
          src="/static/images/my-jyl.png"
          mode="widthFix"
        />
        <view class="item-content">
          <view class="value">573568.11</view>
          <view class="label">积分余额</view>
          <button class="btn" @click="navigateTo('/pages/home/pointsIncomeAndExpenditureDetails')">查看详情</button>
        </view>
      </view>
    </view>

    <!-- 基础服务 -->
    <view class="section mt30">
      <view class="title">
        <text class="title-name">基础服务</text>
        <image
          class="title-sign"
          src="/static/images/icon-tzgg.png"
          mode="widthFix"
        ></image
      ></view>

      <view class="row">
        <view
          v-for="(item, index) in baseList"
          :key="index"
          class="item width25P"
          @click="navigateClickTo(item)"
        >
          <image class="item-img" :src="item.icon" mode="aspectFit"></image>
          <view class="item-label">{{ item.name }}</view>
        </view>
      </view>
    </view>

    <!-- 政策 -->
    <view class="policyBox">
      <image
        class="policyBox-img"
        src="/static/images/my-zc.png"
        mode="widthFix"
      ></image>
      <view class="policyBox-content">汇数生活·伙伴成长政策</view>
      <view
        class="more u-flex"
        @click="navigateTo('/pages/my/order?from=my&tab=3')"
      >
        <text>查看详情</text>
        <u-icon name="arrow-right" color="#999999"></u-icon>
      </view>
    </view>

    <!-- 更多服务 -->
    <view class="section">
      <view class="title">
        <text class="title-name">更多服务</text>
        <image
          class="title-sign"
          src="/static/images/icon-tzgg.png"
          mode="widthFix"
        ></image
      ></view>

      <view class="row">
        <view
          v-for="(item, index) in menu"
          :key="index"
          class="item width20P"
          @click="navigateClickTo(item)"
        >
          <image class="item-img" :src="item.icon" mode="aspectFit"></image>
          <view class="item-label">{{ item.name }}</view>
        </view>
      </view>
    </view>

    <view class="btnBox">
      <button class="logoutBtn" @click="navigateTo('/pages/my/accountSwitching')">切换账号</button>
    </view>

    <u-popup
      v-model="showPopup"
      mode="center"
      :closeable="closeable"
      width="80%"
      height="auto"
      :mask-close-able="true"
      close-icon-color="#ffffff"
      :contentStyle="{ backgroundColor: 'transparent' }"
      border-radius="50"
    >
      <view class="popup-content">
        <img
          class="popup-bg"
          src="/static/images/icon-gzgzh.png"
          mode="widthFix"
        />
      </view>
    </u-popup>
  </view>
</template>

<script>
import service from '@/common/service.js';
import { getMemberInfo } from '@/api/login.js';
import util from '@/common/utils.js';
export default {
  data() {
    return {
      navigateList: [
        {
          id: 0,
          icon: '/static/images/my-dfk.png',
          name: '待付款',
          url: '/pages/my/order?from=my&tab=1',
        },
        {
          id: 1,
          icon: '/static/images/my-dfh.png',
          name: '待发货',
          url: '/pages/my/order?from=my&tab=2',
        },
        {
          id: 2,
          icon: '/static/images/my-dsh.png',
          name: '待收货',
          url: '/pages/my/order?from=my&tab=3',
        },
        {
          id: 3,
          icon: '/static/images/my-ywc.png',
          name: '已完成',
          url: '/pages/my/order?from=my&tab=4',
        },
      ],
      baseList: [
        {
          id: 0,
          icon: '/static/images/my-rzmx.png',
          name: '钱包日流水',
          url: '/pages/home/accountDetails',
        },
        {
          id: 1,
          icon: '/static/images/my-wdqkmx.png',
          name: '我的欠款明细',
          url: '/pages/home/arrearsDetails',
        },
        {
          id: 2,
          icon: '/static/images/my-wdsjk.png',
          name: '预支分润',
          url: '/pages/home/advanceProfit',
        },
        {
          id: 3,
          icon: '/static/images/my-zyhkb.png',
          name: '展业回款宝',
          url: '/pages/home/zhanYeHuaiBao',
        },
      ],
      menu: [
        {
          id: 0,
          icon: '/static/images/my-grzl.png',
          name: '个人资料',
          url: '/pages/my/myInfo',
        },
        {
          id: 2,
          icon: '/static/images/my-wdjsk.png',
          name: '我的结算卡',
          url: '/pages/my/bankCard',
        },
        {
          id: 3,
          icon: '/static/images/my-shdz.png',
          name: '收货地址',
          url: '/pages/address/index',
        },
        {
          id: 4,
          icon: '/static/images/my-smrz.png',
          name: '实名认证',
          url: '/pages/home/realNameAuthentication',
        },
        {
          id: 5,
          icon: '/static/images/my-qyrz.png',
          name: '企业认证',
          url: '/pages/setting/index',
        },
        {
          id: 6,
          icon: '/static/images/my-grzl.png',
          name: '授权书',
          url: '/pages/my/bill',
        },
        {
          id: 7,
          icon: '/static/images/my-wdjsk.png',
          name: '联系推荐人',
          url: '/pages/my/myReferrer',
        },
        {
          id: 8,
          icon: '/static/images/my-shdz.png',
          name: '开票管理',
          url: '/pages/home/billingInformation',
        },
        {
          id: 9,
          icon: '/static/images/my-smrz.png',
          name: 'APP下载',
          url: '/pages/bankCard/index',
        },
        {
          id: 10,
          icon: '/static/images/my-qyrz.png',
          name: '关注公众号',
          url: '/pages/setting/index',
        },
      ],
      user: {},
      // myParent: "",
      myNextLevel: {},
      needPercent: '',
      balance: 0,
      memberAssets: {},
      isCheck: true,
      showPopup: false,
    };
  },
  onLoad(e) {},
  onShow() {
    this.getMyInfo();
    this.getMemberAssets();
  },
  methods: {
    customBack() {},
    authentication() {
      uni.navigateTo({
        url: '/pages/my/authentication?from=my',
      });
    },
    getMemberAssets() {
      const that = this;
      service.getMemberAssets(
        {},
        function (res) {
          if (res && res.status === 1) {
            that.memberAssets = res.data;
          } else {
            util.showToast(res.message);
          }
        },
        function (res) {}
      );
    },
    getMyInfo() {
      const that = this;
      const param = {};
      service.getMyInfo(
        param,
        function (res) {
          if (res && res.data) {
            that.user = res.data;
            // if (!res.data.realName || !res.data.idCard) {
            //   uni.showModal({
            //     title: '提示',
            //     content: '请先前往实名认证',
            //     showCancel: false,
            //     confirmText: '确定',
            //     confirmColor: '#B7926E',
            //     success: function (res) {
            //       uni.navigateTo({
            //         url: '/pages/my/authentication'
            //       });
            //     }
            //   });
            // } else if (!res.data.wxOpenId) {
            //   uni.showModal({
            //     title: '提示',
            //     content: '请先订阅消息通知',
            //     showCancel: false,
            //     confirmText: '确定',
            //     confirmColor: '#B7926E',
            //     success: function (res) {
            //       uni.navigateTo({
            //         url: '/pages/home/serviceNotification'
            //       });
            //     }
            //   });
            // }
          }
        },
        function (res) {}
      );
    },
    navigateClickTo(item) {
      if (item.name === '注销账号') {
        this.resetMember();
        return;
      }
      if (item.name === '关注公众号') {
        this.showPopup = true;
        return;
      }
      if (!item.url) {
        util.showToast('APP开发中,敬请期待');
        return;
      }
      uni.navigateTo({
        url: item.url,
      });
    },
    resetMember() {
      const that = this;
      uni.showModal({
        title: '提示',
        content: '确认注销该账号?',
        showCancel: true,
        confirmText: '确定',
        confirmColor: '#B7926E',
        success: function (res) {
          if (res.confirm) {
            service.resetMember(
              {},
              function (res) {
                if (res && res.status == 1) {
                  util.showToast('注销成功');
                  that.handleLogout();
                }
              },
              function (res) {}
            );
          }
        },
      });
    },
    navigateTo(url) {
      uni.navigateTo({
        url: url,
      });
    },
    handleLogout() {
      // uni.clearStorage();
      uni.removeStorageSync('token');
      uni.reLaunch({
        url: '/pages/login/index',
      });
    },
  },
};
</script>

<style lang="scss" scope>
.container {
  width: 100%;
  min-height: 100vh;
  padding: 0 30rpx 60rpx;
  background-color: #f5f5f5;
  box-sizing: border-box;
  .bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
  }
}

.settingIcon {
  width: 48rpx;
  height: 48rpx;
}

.header {
  position: relative;
  width: 100%;
  height: auto;
  padding-top: 20rpx;
  z-index: 9;
  .header-main {
    width: 100%;
    padding: 0;
    z-index: 99;
    .header-mainIn {
      position: relative;
      width: 100%;
      .header-main_info {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        .info-headImg {
          position: relative;
          width: 110rpx;
          height: 110rpx;
          border-radius: 50%;
          .info-headImg_img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .info-main {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
          padding-left: 30rpx;
          height: 110rpx;
          line-height: 1;
          .info-main_f {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            font-family: PingFang SC, sans-serif;
            font-weight: 800;
            font-size: 36rpx;
            color: #333333;
          }
          .info-main_s {
            margin-top: 25rpx;
            font-family: DIN;
            font-weight: 500;
            font-size: 28rpx;
            color: #999999;
          }
        }
        .info-btn {
          margin-right: -30rpx;
          width: 154rpx;
          height: auto;
        }
      }
    }
  }
}

.balance {
  position: relative;
  margin-top: 40rpx;
  width: 100%;
  padding: 0 20rpx;
  .balance-bg {
    width: 100%;
    height: auto;
  }
  .balance-in {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 44rpx;

    .left {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      line-height: 1;
      font-family: DIN, sans-serif;
      font-weight: bold;
      font-size: 32rpx;
      color: #ffeacc;
      .level-img {
        margin-right: 10rpx;
        width: 48rpx;
        height: auto;
      }
    }
    .right {
      position: relative;
      font-family: PingFang SC, sans-serif;
      font-weight: 400;
      font-size: 22rpx;
      color: rgba($color: #ffffff, $alpha: 0.5);
    }
  }
}

.navigationBox {
  position: absolute;
  top: 510rpx;
  left: 0;
  width: 100%;
  padding: 0 30rpx;
  z-index: 99;
  .navigationBox-in {
    padding: 30rpx;
    background: #ffffff;
    border-radius: 10rpx;
    overflow: hidden;
    .navigationBox-header {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      .title {
        font-size: 28rpx;
        color: #222222;
        font-weight: bold;
      }
    }
  }
}

.showBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30rpx;
  width: 100%;
  .item {
    position: relative;
    flex: 1;
    min-width: 0;

    .item-img {
      width: 100%;
      height: auto;
    }
    .item-content {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      width: 100%;
      height: 100%;
      padding: 25rpx 30rpx;
      line-height: 1;
      .value {
        font-family: DIN, sans-serif;
        font-weight: bold;
        font-size: 42rpx;
        color: #ffffff;
      }

      .label {
        margin-top: 15rpx;
        font-family: PingFang SC, sans-serif;
        font-weight: 400;
        font-size: 24rpx;
        color: rgba($color: #ffffff, $alpha: 0.6);
      }

      .btn {
        display: block;
        margin-top: 20rpx;
        margin-left: 0;
        width: 140rpx;
        height: 42rpx;
        line-height: 42rpx;
        font-family: PingFang SC, sans-serif;
        font-weight: bold;
        font-size: 22rpx;
        color: #c5a27f;
        background: #ffffff;
        border-radius: 21rpx;
      }
    }
  }
}

.section {
  position: relative;
  width: 100%;
  height: auto;
  padding: 30rpx;
  background: #ffffff;
  border-radius: 20rpx;
  z-index: 9;
  .title {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    .title-name {
      position: relative;
      font-family: PingFang SC, sans-serif;
      font-weight: 800;
      font-size: 28rpx;
      color: #333333;
      z-index: 9;
    }
    .title-sign {
      position: absolute;
      top: -10rpx;
      left: 95rpx;
      width: 32rpx;
      height: auto;
      z-index: 1;
    }
    .more {
      font-family: PingFang SC, sans-serif;
      font-weight: 400;
      font-size: 22rpx;
      color: #999999;
    }
  }

  .row {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top: 40rpx;
      min-width: 0;
      .item-img {
        width: 72rpx;
        height: 72rpx;
      }
      .item-label {
        margin-top: 3rpx;
        font-family: PingFang SC, sans-serif;
        font-weight: 400;
        font-size: 22rpx;
        color: #333333;
      }
    }
    .width20P {
      width: 20%;
    }
    .width25P {
      width: 25%;
    }
  }

  .navigation {
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top: 30rpx;
    width: 25%;
    .icon {
      width: 48rpx;
      height: 48rpx;
    }
    .name {
      margin-top: 15rpx;
      font-family: PingFang SC, sans-serif;
      font-weight: 400;
      font-size: 24rpx;
      color: #333333;
    }
  }
}

.policyBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 30rpx 0;
  width: 100%;
  height: auto;
  padding: 30rpx 20rpx;
  background: #ffffff;
  border-radius: 20rpx;
  .policyBox-img {
    width: 78rpx;
    height: auto;
  }

  .policyBox-content {
    flex: 1;
    min-width: 0;
    margin-left: 16rpx;
    font-family: PingFang SC, sans-serif;
    font-weight: bold;
    font-size: 28rpx;
    color: #333333;
  }
  .more {
    font-family: PingFang SC, sans-serif;
    font-weight: 400;
    font-size: 22rpx;
    color: #999999;
  }
}

.btnBox {
  margin-top: 30rpx;
  width: 100%;
  padding: 0;
  .logoutBtn {
    width: 100%;
    height: 88rpx;
    font-family: PingFang SC, sans-serif;
    font-weight: 800;
    font-size: 28rpx;
    color: #ffffff;
    line-height: 88rpx;
    text-align: center;
    background: linear-gradient(90deg, #d9b189, #c5a27f);
    border-radius: 20rpx;
  }
}

.content-progress {
  position: relative;
  margin-top: 30rpx;
  width: 100%;
  height: 14rpx;
  border-radius: 7rpx;
  background: rgba(255, 255, 255, 0.1);
  opacity: 0.8;
  .progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0 66rpx;
    .progress-in {
      width: 0;
      height: 14rpx;
      background: linear-gradient(90deg, #f1cc82, #ffdd99);
      border-radius: 7rpx;
      z-index: 8;
    }
  }

  .left {
    position: absolute;
    top: -8rpx;
    left: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 66rpx;
    height: 28rpx;
    line-height: 28rpx;
    background: linear-gradient(90deg, #f1cc82, #ffdd99);
    border-radius: 14rpx;
    z-index: 9;
  }
  .right {
    position: absolute;
    top: -8rpx;
    right: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 66rpx;
    height: 28rpx;
    line-height: 28rpx;
    background: linear-gradient(90deg, #b3b3b3, #d8d8d8);
    border-radius: 14rpx;
    z-index: 9;
  }
  .img {
    width: 18rpx;
    height: auto;
  }
  .text {
    margin-left: 2rpx;
    font-size: 20rpx;
    font-family: DIN Black;
    font-weight: 400;
    font-style: italic;
  }
}

::v-deep uni-modal .uni-modal__bd {
  white-space: pre-wrap;
}

.popup-content {
  width: 100%;
  .popup-bg {
    width: 100%;
    height: auto;
  }
}
</style>
